import { useState } from 'react';
import { Form, Button, Input, Picker } from 'antd-mobile';
import { REQUIRED_RULE } from '@common/constants';

const DefaultParsingRule = () => {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [selectedVendor, setSelectedVendor] = useState([]);

  const vendorItems = [
    [
      { label: "供应商A", value: "vendor001" },
      { label: "供应商B", value: "vendor002" },
      { label: "供应商C", value: "vendor003" },
      { label: "供应商D", value: "vendor004" },
      { label: "供应商E", value: "vendor005" },
    ],
  ];

  const onFinish = () => {
    
  };

  return (
    <>
      <Form
        form={form}
        onFinish={onFinish}
        footer={
          <Button block type="submit" color="primary" size="large">
            保存
          </Button>
        }
      >
        <Form.Header>默认解析规则</Form.Header>
        <Form.Item
          name="vendorName"
          label="供应商"
          rules={REQUIRED_RULE}
          extra={
            <Button
              color="primary"
              fill="outline"
              onClick={() => setVisible(true)}
            >
              选择
            </Button>
          }
        >
          <Input placeholder="请选择" readOnly />
        </Form.Item>
      </Form>
      <Picker
        columns={vendorItems}
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
        value={selectedVendor}
        onConfirm={(val, ext) => {
          form.setFieldValue("vendorName", ext.items[0].label);
          setSelectedVendor(val);
        }}
      />
    </>
  );
};

export default DefaultParsingRule;